<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html, body {
        margin:0 ;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .container {
        width: 432px;
        height: 270px;
        border: 1px solid black;
        overflow: hidden;
        position: relative;
    }
    .inner {
        width: 1296px;
        height: 270px;
        font-size: 0;
        position: relative;
    }
    .img-container{
        width:432px;
        height: 270px;
        display: inline-block;
    }
    .img-container img {
        width: 100%;
        height: auto;
    }
    .prev ,.next {
        /*绝对定位相对于最近的父级定位，而且父级还得不是默认定位*/
        position: absolute;
        font-size: 80px;
        color: #7fffff;
        height:106px ;
        width: 61px;
        line-height: 106px;
        text-align: center;
        vertical-align: center;
        background-color: rgba(0,0,0,.5);
        /*鼠标指针*/
        cursor: pointer;
    }
    .prev {
        top: 82px;
        left: 0;
    }
    .next {
        top: 82px;
        right: 0;
    }
</style>
<body>
<div class="container" style="left: 0;">
    <div class="inner">
        <div class="img-container">
            <img src="1.jpg">
        </div>
        <div class="img-container">
            <img src="2.jpg">
        </div>
        <div class="img-container">
            <img src="3.jpg">
        </div>
    </div>

    <div class="prev"><</div>
    <div class="next">></div>
</div>
</body>
<script>
    let prev = document.querySelector('.prev');
    let next = document.querySelector('.next');
    let inner = document.querySelector('.inner');
    let container =  document.querySelector('.container');
    let  innerLeft ;
    function handleNext (){
        innerLeft =Number(inner.style.left.substring(0,inner.style.left.length-2));
        inner.style.left = (Number(inner.style.left.substring(0,inner.style.left.length-2))-432)+'px';
        if(innerLeft === -1296){
            innerLeft = 0;
            inner.style.left = innerLeft+'px'
        }else {
            inner.style.left = (Number(inner.style.left.substring(0,inner.style.left.length-2))-432)+'px';
        }
    }
    function handlePrev (){
        innerLeft =Number(inner.style.left.substring(0,inner.style.left.length-2));
        if (innerLeft === 0){
            innerLeft = -1296;
            inner.style.left = innerLeft+'px'
        }else {
            inner.style.left = (Number(inner.style.left.substring(0,inner.style.left.length-2))+432)+'px';
        }
        //substring字符串截取
        //Number

    }
    next.addEventListener('click',handleNext);
    prev.addEventListener('click',handlePrev);
    let autoScroll ;
    // function addTimer (){
    //     autoScroll = setInterval(function () {
    //         inner.style.left = (Number(inner.style.left.substring(0,inner.style.left.length-2))-432)+'px';
    //     },2000)
    // }

    //setInterval 设置时间间隔，里面写事件

    container.addEventListener('mouserover',function () {
        //clearInterval解除计时器，当鼠标放上去时
        clearInterval(autoScroll)
    });
    container.addEventListener('mouseout',function () {
        addTimer()
    });

</script>
</html>